<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8">
    <title>试题管理</title>
    <meta name="keywords" content="">
    <link rel="shortcut icon" href="../resources/images/favicon.ico"/>
    <link href="../resources/bootstrap/css/bootstrap-huan.css" rel="stylesheet">
    <link href="../resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../resources/css/style.css" rel="stylesheet">
    <link href="../resources/css/exam.css" rel="stylesheet">
    <link href="../resources/chart/morris.css" rel="stylesheet">
    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="../resources/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-theme.css"/>
    <script type="text/javascript" href=""></script>
    <script type="text/javascript" href="../resources/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../resources/css/laypage.css"/>
    <link rel="stylesheet" href="../resources/layer/skin/default/layer.css"/>
    <script type="text/javascript" src="../resources/js/jquery/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="../resources/laypage/laypage.js"></script>
    <script type="text/javascript" src="../resources/layer/layer.js"></script>
    <style>
        .change-property, .publish-paper, .delete-paper, .offline-paper {
            cursor: pointer;
        }
    </style>
</head>
<body>

<header>
    <div class="container">
        <div class="row">
            <div class="col-xs-5">
                <div class="logo">
                    <h1><span>在线考试系统</span></h1>
                </div>
            </div>
        </div>
    </div>
    <div class="navbar bs-docs-nav" role="banner">
        <div class="container">
            <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
                <ul class="nav navbar-nav">
                    <li>
                        <a href=""><i class=""></i>网站首页</a>
                    </li>
                    <li>
                        <a href=""><i class=""></i>试题管理</a>
                    </li>

                    <li>
                        <a href=""><i class=""></i>试卷管理</a>
                    </li>
                    <li>
                        <a href=""><i class=""></i>会员管理</a>
                    </li>
                    <li>
                        <a href=""><i class=""></i>题库管理</a>
                    </li>
                    <li>
                        <a href=""><i class=""></i>网站设置</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>
<!-- Navigation bar starts -->

<div class="navbar bs-docs-nav" role="banner">
    <div class="container">
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
        </nav>
    </div>
</div>

<!-- Navigation bar ends -->

<!-- Slider starts -->

<div id="app">
    <!--左导航guohanyu-->
    <div id="left-nav"  style="position: absolute;left: 20px;top: 200px; width: 300px;">
        <ul class="nav default-sidenav">

            <li class="active">
                <a> <i class="fa fa-list-ul"></i> 试卷管理 </a>
            </li>
             	<li>
                    <a href="exampaper-add.html"> <i class="fa fa-list-ul"></i>新增试卷</a>
                </li>
        </ul>
    </div>
    <!-- Slider (Flex Slider) -->

    <div class="container" style="min-height:500px;">

        <div class="row">
            <div class="col-xs-2" id="left-menu">
            </div>
            <div class="col-xs-10" id="right-content">
                <div class="page-header">
                    <h1><i class="fa fa-list-ul"></i> 试卷管理 </h1>
                </div>
                <div class="page-content">
                    <form class="form-inline " role="form">
                        查询条件：
                        <div class="form-group">
                            <label class="sr-only" for="field">请选择分类</label>
                            <select  class="form-control" id="field" >
                                <option value="0">请选择分类</option>
                                <option  v-for="(item,index) in fieldListresult" v-bind:value="item.fieldId">{{item.fieldName}}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="point">详细分类</label>
                            <select  class="form-control" id="point" >
                                <option value="0">请先选择分类</option>
                                <option  v-for="(item,index) in pointListresult" v-bind:value="item.pointId">{{item.pointName}}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="examPaperName">试卷标题</label>
                            <input type="text" class="form-control" id="examPaperName" placeholder="输入试卷名称查询">
                        </div>
                        <button type="button" id="findExamPaper" class="btn btn-success">查询试卷</button>
                    </form>


                    <div id="question-list">
                        <table class="table-striped table">
                            <thead>
                            <tr>
                                <td></td>
                                <td>序号</td>
                                <td>试卷名称</td>
                                <td>时长</td>
                                <td>类别</td>
                                <td>创建人</td>
                                <td>状态</td>
                                <td>操作</td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item,index) in result">
                                <td><input type="checkbox" name="paperChoose"></td>
                                <td>{{index+1}}</td>
                                <td>{{item.name}}</td>
                                <td>{{item.duration}}</td>
                                <td>{{item.paperType}}</td>
                                <td>{{item.creator}}</td>
                                <td>{{item.status}}</td>
                                <td><a>编辑</a>/<a>删除</a>/<a>下载</a></td>
                            </tr>
                            <tr>
                                <td colspan="8"><div id="pagenav"></div></td>
                            </tr>
                            </tbody>
                            <tfoot>
                            </tfoot>
                        </table>

                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>

<footer>
    <div class="container" style="width: 500px; margin: 0 auto;">
        <div class="row">
            <div class="col-md-12">
                <div class="copy">
                    <p>
                        ExamManage © <a href="javascript:void(0);" target="_blank">ExamManage</a> - <a
                            href="javascript:void(0);" target="_blank">主页</a> | <a href="javascript:void(0);" target="_blank">关于我们</a>
                        | <a href="javascript:void(0);" target="_blank">FAQ</a> | <a
                            href="javascript:void(0);" target="_blank">联系我们</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- Slider Ends -->

<!-- Javascript files -->
<!-- jQuery -->
<script type="text/javascript" src="../resources/js/jquery/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="../resources/js/all.js"></script>
<!-- Bootstrap JS -->
<script type="text/javascript" src="../resources/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../resources/js/exampaper-list.js?v=1"></script>
<script type="text/javascript" src="../resources/vue/vue.js"></script>
</body>
</html>
<script type="text/javascript">
    //vue使用
    var app = new Vue({
        el:"#app",
        data:{
            result:[],
            fieldListresult:[],
            pointListresult:[]
        }
    })

    $(function () {
        getExamPaperList();
        getAllField();
        getPointByField();

        //查询按钮
        $("#findExamPaper").click(function(){
            getExamPaperList();
        })
        //父类下拉框
        $("#field").change(function(){
            getPointByField();
            getExamPaperList();
        })
        //子类下拉框
        $("#point").change(function(){
            getExamPaperList();
        })


    })

    //查询用户数据
    var getExamPaperList = function (curr){
        $.ajax({
            type:'post',
            url:'/ExamPage/getExamPaperList',
            dataType:'json',
            data:{
                pageSize:10,
                pageNum: curr || 1 ,
                name:$("#examPaperName").val(),
                fieldId:$("#field").val(),
                pointId:$("#point").val()
            },
            success:function (msg) {
                app.result = msg.page;
                laypage({
                    cont:'pagenav', //分页容器
                    pages:msg.totalPage,//总页数
                    skin:'#0099CC',
                    first:'首页',
                    last:'末页',
                    curr:curr||1,
                    jump:function (obj,first) {
                        if(!first){
                            getExamPaperList(obj.curr);
                        }
                    }
                });
            },error:function () {
                alert("失败");
            }
        });
    };

    //查询分类列表信息 郭瀚钰
    function getAllField() {
        $.ajax({
            type: 'post',
            url: '/Field/getAllField',
            dataType: 'json',
            success: function (msg) {
                app.fieldListresult = msg.fieldList
            }, error: function () {
                alert("分类列表失败")
            }
        })
    }

    //根据父类获取小类列表信息 郭瀚钰
    function getPointByField() {
        $.ajax({
            type: 'post',
            url: '/Point/getPointByField',
            dataType: 'json',
            data:{
                fieldId: $("#field").val()
            },
            success: function (msg) {
                app.pointListresult = msg.pointList
            }, error: function () {
                alert("子类分类列表失败")
            }
        })
    }





</script>